<script setup>
import { ref, onMounted } from 'vue'
import Carousel from './Carousel/Carousel.vue';
import { getGoodsByPage } from '@/api/home.js'
// 获取商品
let pageNum = ref(1)
let total = ref(undefined)
const goodsList = ref([])
async function getGoodsList() {
    const { data } = await getGoodsByPage({ pageNum: pageNum.value, pageSize: 10 })
    goodsList.value = [...goodsList.value, ...data.records]
    total.value = data.total
}
getGoodsList()


//获取监听的dom
const loadMore = ref(undefined)
onMounted(() => { //触底加载
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting && goodsList.value.length > 0) {
                if(total.value == goodsList.value.length)return
                pageNum.value++
                getGoodsList()
            }
        })
    })
    observer.observe(loadMore.value)
})

</script>

<template>
    <div class="home">
        <div class="content">
            <Carousel></Carousel>
        </div>
        <div class="wrap">
            <h1>为你推荐</h1>
            <div class="content">
                <GoodsItem :goodsList="goodsList"></GoodsItem>
                <div class="load_more" ref="loadMore"></div>
            </div>

        </div>

    </div>
</template>

<style scoped lang="less">
.load_more {
    width: 100%;
    height: 20px;
}

.home {
    .wrap {
        background-color: #f5f5f5;

        h1 {
            text-align: center;
            height: 70px;
            line-height: 70px;

            &::before {
                display: inline-block;
                content: '';
                width: 25px;
                height: 20px;
                background-image: url(/public/sprite.png);
            }

            &::after {
                display: inline-block;
                content: '';
                width: 25px;
                height: 20px;
                background-image: url(/public/sprite.png);
                background-position: -25px 0;
            }
        }
    }


}
</style>
